<template>
  <div class="login-container">
    <van-button class="back-button" @click="goBack" icon="arrow-left">
      返回
    </van-button>
    <div class="logo">
      <img src="./wang.png" width="100px" height="100px" alt="Logo" />
    </div>
    <h2>阿旺阅读</h2>
    <van-button type="primary" class="login-button" @click="loginWithFacebook" icon="user">
      账号密码登录
    </van-button>
    <van-button type="success" class="login-button" @click="loginWithGoogle" icon="phone">
      手机号登录
    </van-button>
    <van-button type="info" class="login-button" @click="loginWithEmail" icon="message">
      邮箱登录
    </van-button>
    <van-button type="warning" class="login-button" @click="loginWithzhu" icon="message">
      没有账号，立即注册
    </van-button>
    <p class="agreement">
      如果继续，您同意 <a @click="goaggrement">用户协议</a> 和 <a @click="goaggrement">隐私政策</a>
    </p>
  </div>
</template>

<script>
export default {
  methods: {
    goaggrement(){
      this.$router.push("/userAgreement");
    },
    goBack() {
      this.$router.push("/mine"); // 返回上一页
    },
    loginWithFacebook() {
      // 账号密码登录 登录逻辑
      this.$router.push("/login1");
    },
    loginWithGoogle() {
      // 手机号验证码登录登录逻辑
      this.$router.push("/login2");
    },
    loginWithEmail() {
      // 邮箱登录逻辑
      this.$router.push("/login3");
    },
    loginWithzhu() {
      // 注册逻辑
      this.$router.push("/login4");
    }
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.back-button {
  position: absolute; /* 绝对定位 */
  top: 20px; /* 距离顶部20px */
  left: 20px; /* 距离左侧20px */
}

.logo {
  margin-bottom: 20px;
}

.login-button {
  width: 200px;
  margin: 10px 0;
}

.agreement {
  margin-top: 20px;
  font-size: 12px;
}
</style>